<template>
  <div class="doubleThTable">
    <el-table :data="data.data" style="width: 100%" border :show-header="true">
      <el-table-column
        :label="data.type[0].label"
        align="right"
        width="150"
        v-if="data.type"
      >
        <el-table-column
          :prop="data.type[1].value"
          :label="data.type[1].label"
          width="150"
          align="left"
        >
        </el-table-column>
      </el-table-column>

      <el-table-column
        v-for="(col, i) in data.column"
        :key="i"
        :prop="col.prop"
        :label="col.label"
        align="center"
      >
        <template v-if="col.children">
          <el-table-column
            v-for="(item, index) in col.children"
            :key="index"
            :prop="item.prop"
            :label="item.label"
          >
          </el-table-column>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    data: Array | Object,
  },
  data() {
    return {
      columnList: [
        {
          prop: "oneToFour",
          label: "1-4",
        },
        {
          prop: "fiveToSix",
          label: "5-6",
        },
        {
          prop: "sevenToNine",
          label: "7-9",
        },
        {
          prop: "noLevel",
          label: "未构级",
        },
        {
          prop: "highLevel",
          label: "存在生活自理障碍人数",
        },
        {
          prop: "noChange",
          label: "无变动",
        },
        {
          prop: "littleChange",
          label: "小极差变动",
        },
        {
          prop: "largeChange",
          label: "大极差变动",
        },
        {
          prop: "passNum",
          label: "通过",
        },
        {
          prop: "noPassNum",
          label: "未通过",
        },
      ],
      tableData: {
        Data: [
          {
            name: "劳动能力",

            oneToFour: "111",
            fiveToSix: "111",
            sevenToNine: "111",
            noLevel: "111",
            highLevel: "111",
            noChange: "111",
            littleChange: "111",
            largeChange: "111",
            passNum: "111",
            noPassNum: "111",
          },
          {
            name: "劳动能力复查鉴定",

            oneToFour: "111",
            fiveToSix: "111",
            sevenToNine: "111",
            noLevel: "111",
            highLevel: "111",
            noChange: "111",
            littleChange: "111",
            largeChange: "111",
            passNum: "111",
            noPassNum: "111",
          },
          {
            name: "劳动能力再次鉴定",

            oneToFour: "111",
            fiveToSix: "111",
            sevenToNine: "111",
            noLevel: "111",
            highLevel: "111",
            noChange: "111",
            littleChange: "111",
            largeChange: "111",
            passNum: "111",
            noPassNum: "111",
          },
        ],
        total: 0,
      },
    };
  },
};
</script>

  <style>
.doubleThTable .el-table thead.is-group tr:first-of-type th:first-of-type {
  border-bottom: none;
}
.doubleThTable
  .el-table
  thead.is-group
  tr:first-of-type
  th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 87px; /*这里需要自己调整，根据td的宽度和高度*/
  top: 0;
  left: 0;
  background-color: rgba(31, 179, 255, 0.2);
  /* opacity: 0.2; */
  display: block;
  transform: rotate(-61deg); /*这里需要自己调整，根据线的位置*/
  transform-origin: top;
}
.doubleThTable
  .el-table
  thead.is-group
  tr:last-of-type
  th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 120px; /*这里需要自己调整，根据td的宽度和高度*/
  bottom: 0;
  right: 0;
  background-color: rgba(31, 179, 255, 0.2);
  /* opacity: 0.2; */
  display: block;
  transform: rotate(-61deg); /*这里需要自己调整，根据线的位置*/
  transform-origin: bottom;
}
</style>